<template>
	<view class="" style="padding-bottom: 150rpx;">
		<view class="mainpadding">
			<view class="sanshier fonweight zhonghei">基本信息</view>
		</view>
		<view class=" ffffff ">
			<view class="mainpadding xiahuaxian flexbetween">
				<view class="titletext xiaohui">店员名称</view>
				<input type="text" class="textright titletext zhonghei" placeholder="请输入店员名称" v-model="name">
			</view>
			<view class="mainpadding xiahuaxian flexbetween">
				<view class="titletext xiaohui">手机号</view>
				<input class="textright" placeholder="请输入手机号" type="number" v-model="mobile" />
			</view>
			<view class="mainpadding xiahuaxian flexbetween">
				<view class="titletext xiaohui">状态</view>
				<view class="flexright">
					<view class=" dingwei flexcenter margin_right" :class="status==1?'kqbtn':'jybtn'" @click="status=1">开启
						<image class="dugicon" src="../static/images/system/dg.png" v-if="status==1" mode=""></image>
					</view>
					<view class="dingwei flexcenter" :class="status==2?'kqbtn':'jybtn'" @click="status=2">禁用
						<image class="dugicon" src="../static/images/system/dg.png"  v-if="status==2" mode=""></image>
					</view>
				</view>
			</view>
		</view>
		<view class="mainpadding">
			<view class="sanshier fonweight zhonghei">权限</view>
		</view>
		<view class="ffffff ">
			<view class="mainpadding xiahuaxian flexbetween">
				<view class="titletext xiaohui">扫码核销</view>
				<u-switch v-model="keyall.key1" activeColor="#FF9341"></u-switch>
			</view>
		</view>
		<view class="ffffff ">
			<view class="mainpadding xiahuaxian flexbetween">
				<view class="titletext xiaohui">输码核销</view>
				<u-switch v-model="keyall.key2" activeColor="#FF9341"></u-switch>
			</view>
		</view>
		<view class="ffffff ">
			<view class="mainpadding xiahuaxian flexbetween">
				<view class="titletext xiaohui">商品管理</view>
				<u-switch v-model="keyall.key3" activeColor="#FF9341"></u-switch>
			</view>
		</view>
		<view class="ffffff ">
			<view class="mainpadding xiahuaxian flexbetween">
				<view class="titletext xiaohui">保证金</view>
				<u-switch v-model="keyall.key4" activeColor="#FF9341"></u-switch>
			</view>
		</view>
		<view class="ffffff ">
			<view class="mainpadding xiahuaxian flexbetween">
				<view class="titletext xiaohui">编辑信息</view>
				<u-switch v-model="keyall.key5" activeColor="#FF9341"></u-switch>
			</view>
		</view>

		<view class="ffffff ">
			<view class="mainpadding xiahuaxian flexbetween">
				<view class="titletext xiaohui">店员管理</view>
				<u-switch v-model="keyall.key6" activeColor="#FF9341"></u-switch>
			</view>
		</view>
		<view class="ffffff ">
			<view class="mainpadding xiahuaxian flexbetween">
				<view class="titletext xiaohui">订单管理</view>
				<u-switch v-model="keyall.key7" activeColor="#FF9341"></u-switch>
			</view>
		</view>
		<view class="ffffff ">
			<view class="mainpadding xiahuaxian flexbetween">
				<view class="titletext xiaohui">收益</view>
				<u-switch v-model="keyall.key8" activeColor="#FF9341"></u-switch>
			</view>
		</view>
		<view class="gudingdb mainpadding ffffff">
			<view class="bigbtn" @click="submit">确认</view>
		</view>
	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")

	export default {
		data() {
			return {
				value: true,
				name: "",
				mobile: "",
				status: 1, //状态:1=启用,2=禁用
				keyall: {
					key1: false,
					key2: false,
					key3: false,
					key4: false,
					key5: false,
					key6: false,
					key7: false,
					key8: false
				},
				shop_id:"",
				listid:""
			}
		},
		onLoad(options) {
			this.shop_id = options.shop_id
			if(options.id){
				uni.setNavigationBarTitle({
					title:"编辑店员"
				})
				this.listid = options.id
				this.getDetail()
			}
		},
		methods: {
			getDetail(){
				httpRequest.request('/api/shopcl/shopUserDetail', 'GET', {
					shop_id: this.shop_id,
					id:this.listid
				}).then(res => {
					this.name = res.data.name
					this.mobile = res.data.mobile
					this.status = res.data.status
					if(res.data.rolelist==0){
						this.keyall = {
							key1: true,
							key2: true,
							key3: true,
							key4: true,
							key5: true,
							key6: true,
							key7: true,
							key8: true
						}
						return false
					}
					let arr = res.data.rolelist.split(",")
					arr.forEach(item=>{
						this.keyall['key'+item] = true
					})
				})
			},
			submit(){
				let arr = []
				for(var i in this.keyall){
					if(this.keyall[i]){
						arr.push(i[3])
					}
					console.log(i,i[3]);
				}
				if(this.name==""){
					httpRequest.toast("请输入店员名称")
					return false
				}
				if(this.mobile==""){
					httpRequest.toast("请输入手机号")
					return false
				}
				uni.showLoading({
					mask:true,
					title:"请稍后"
				})
				let url = "/api/shopcl/addShopUser"
				let data = {
					shop_id:this.shop_id,
					name:this.name,
					mobile:this.mobile,
					status:this.status,
					rolelist:arr.join(),
				}
				if(this.listid){
					url = "/api/shopcl/editShopUser"
					this.$set(data,"id",this.listid)
				}
				httpRequest.request(url, 'GET', data, false, false, true).then(res => {
					uni.hideLoading()
					httpRequest.toast(res.msg)
					if (res.code == 1) {
						if(this.listid){
							uni.$emit("shuaxin","")
						}
						setTimeout(()=>{
							uni.navigateBack(1)
						},1000)
					}
				}).catch(err => {
					httpRequest.toast(err.msg);
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.jybtn {
		width: 138rpx;
		height: 69rpx;
		background: #f0f0f0;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		font-size: 24rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		color: #666666;
		border: 2rpx solid #f0f0f0;
	}

	.dugicon {
		width: 25rpx;
		height: 20rpx;
		position: absolute;
		bottom: 0;
		right: 0;
	}

	.kqbtn {
		width: 138rpx;
		height: 69rpx;
		background: rgba(255, 147, 65, 0.1);
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		font-size: 24rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		color: #FF9341;
		border: 2rpx solid #FF9341;
	}
</style>